<style>
    :root {
        --primary: #0d6efd;
        --secondary: #6c757d;
        --success: #198754;
        --info: #0dcaf0;
        --warning: #ffc107;
        --danger: #dc3545;
        --light: #f8f9fa;
        --dark: #212529;
        --transition: all 0.3s ease;
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: #f0f2f5;
        padding: 0;
        margin: 0;
        color: #333;
    }

    .container {
        min-height: 100vh;
        padding: 2rem;
    }

    .page-title {
        text-align: center;
        margin-bottom: 2.5rem;
        font-weight: 700;
        color: var(--dark);
    }

    .section-description {
        text-align: center;
        margin-bottom: 3rem;
        color: #666;
        font-size: 1.1rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .alert-category {
        margin-bottom: 4rem;
    }

    .category-title {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--primary);
        display: inline-block;
    }

    .alert-example {
        margin-bottom: 2rem;
        transition: var(--transition);
    }

    .alert-label {
        font-size: 0.9rem;
        color: #666;
        margin-top: 1rem;
        margin-bottom: 2rem;
        text-align: center;
    }

    /* 全屏提示框基础样式 */
    .fullscreen-alert {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        z-index: 1050;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .fullscreen-alert.show {
        opacity: 1;
        visibility: visible;
    }

    .fullscreen-alert .alert-content {
        max-width: 600px;
        width: 100%;
    }

    .fullscreen-alert .alert-icon {
        font-size: 3rem;
        margin-bottom: 1.5rem;
    }

    .fullscreen-alert .alert-title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }

    .fullscreen-alert .alert-message {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .fullscreen-alert .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1.1rem;
    }

    /* 全屏提示框样式变体 */
    .fullscreen-primary {
        background-color: var(--primary);
        color: white;
    }

    .fullscreen-success {
        background-color: var(--success);
        color: white;
    }

    .fullscreen-danger {
        background-color: var(--danger);
        color: white;
    }

    .fullscreen-warning {
        background-color: var(--warning);
        color: var(--dark);
    }

    .fullscreen-info {
        background-color: var(--info);
        color: var(--dark);
    }

    .fullscreen-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .fullscreen-overlay {
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
    }

    .fullscreen-light {
        background-color: white;
        color: var(--dark);
        box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
    }

    /* 动画效果 */
    .alert-slide-down {
        transform: translateY(-100%);
    }

    .alert-slide-down.show {
        transform: translateY(0);
    }

    .alert-slide-up {
        transform: translateY(100%);
    }

    .alert-slide-up.show {
        transform: translateY(0);
    }

    .alert-fade-in {
        opacity: 0;
    }

    .alert-fade-in.show {
        animation: fadeIn 0.5s ease forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .alert-zoom {
        transform: scale(0);
    }

    .alert-zoom.show {
        transform: scale(1);
    }

    .alert-pulse {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        }
        70% {
            box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        }
    }
</style>

<div class="container">
    <h1 class="page-title">全屏消息提示样式展示</h1>
    <p class="section-description">以下展示了多种使用Bootstrap和纯CSS实现的全屏消息提示样式，点击按钮可查看效果，适用于需要用户重点关注的操作反馈</p>

    <!-- 基础全屏提示框 -->
    <div class="alert-category">
        <h2 class="category-title"><i class="fas fa-layer-group"></i> 基础全屏提示框</h2>

        <div class="alert-example text-center">
            <button class="btn btn-primary" onclick="showAlert('fullscreen-alert-1')">
                <i class="fas fa-check-circle me-2"></i>显示成功提示
            </button>
            <p class="alert-label">成功类全屏提示 - 用于重要操作成功反馈</p>
        </div>

        <div class="alert-example text-center">
            <button class="btn btn-danger" onclick="showAlert('fullscreen-alert-2')">
                <i class="fas fa-exclamation-circle me-2"></i>显示错误提示
            </button>
            <p class="alert-label">错误类全屏提示 - 用于重要操作失败反馈</p>
        </div>

        <div class="alert-example text-center">
            <button class="btn btn-warning" onclick="showAlert('fullscreen-alert-3')">
                <i class="fas fa-exclamation-triangle me-2"></i>显示警告提示
            </button>
            <p class="alert-label">警告类全屏提示 - 用于需要用户注意的重要信息</p>
        </div>
    </div>

    <!-- 自定义样式全屏提示框 -->
    <div class="alert-category">
        <h2 class="category-title"><i class="fas fa-paint-brush"></i> 自定义样式全屏提示框</h2>

        <div class="alert-example text-center">
            <button class="btn btn-info" onclick="showAlert('fullscreen-alert-4')">
                <i class="fas fa-magic me-2"></i>显示渐变背景提示
            </button>
            <p class="alert-label">渐变背景全屏提示 - 现代感设计</p>
        </div>

        <div class="alert-example text-center">
            <button class="btn btn-dark" onclick="showAlert('fullscreen-alert-5')">
                <i class="fas fa-moon me-2"></i>显示深色覆盖提示
            </button>
            <p class="alert-label">深色覆盖全屏提示 - 突出内容</p>
        </div>

        <div class="alert-example text-center">
            <button class="btn btn-light border" onclick="showAlert('fullscreen-alert-6')">
                <i class="fas fa-sun me-2"></i>显示浅色全屏提示
            </button>
            <p class="alert-label">浅色全屏提示 - 柔和的视觉效果</p>
        </div>
    </div>

    <!-- 带动画效果的全屏提示框 -->
    <div class="alert-category">
        <h2 class="category-title"><i class="fas fa-film"></i> 带动画效果的全屏提示框</h2>

        <div class="alert-example text-center">
            <button class="btn btn-primary" onclick="showAlert('fullscreen-alert-7')">
                <i class="fas fa-arrow-down me-2"></i>显示滑入提示
            </button>
            <p class="alert-label">下滑动画全屏提示 - 流畅的进入效果</p>
        </div>

        <div class="alert-example text-center">
            <button class="btn btn-success" onclick="showAlert('fullscreen-alert-8')">
                <i class="fas fa-search-plus me-2"></i>显示缩放提示
            </button>
            <p class="alert-label">缩放动画全屏提示 - 聚焦式进入效果</p>
        </div>

        <div class="alert-example text-center">
            <button class="btn btn-warning" onclick="showAlert('fullscreen-alert-9')">
                <i class="fas fa-heartbeat me-2"></i>显示脉冲提示
            </button>
            <p class="alert-label">脉冲动画全屏提示 - 强烈的视觉吸引</p>
        </div>
    </div>
</div>

<!-- 全屏提示框实例 -->
<!-- 1. 成功提示 -->
<div id="fullscreen-alert-1" class="fullscreen-alert fullscreen-success">
    <div class="alert-content">
        <div class="alert-icon">
            <i class="fas fa-check-circle"></i>
        </div>
        <h3 class="alert-title">操作成功</h3>
        <p class="alert-message">您的设置已成功保存，所有更改将立即生效。</p>
        <button class="btn btn-light" onclick="hideAlert('fullscreen-alert-1')">
            <i class="fas fa-times me-2"></i>确认
        </button>
    </div>
</div>

<!-- 2. 错误提示 -->
<div id="fullscreen-alert-2" class="fullscreen-alert fullscreen-danger">
    <div class="alert-content">
        <div class="alert-icon">
            <i class="fas fa-exclamation-circle"></i>
        </div>
        <h3 class="alert-title">操作失败</h3>
        <p class="alert-message">很抱歉，您的操作未能完成，请检查网络连接后重试。</p>
        <button class="btn btn-light" onclick="hideAlert('fullscreen-alert-2')">
            <i class="fas fa-times me-2"></i>关闭
        </button>
    </div>
</div>

<!-- 3. 警告提示 -->
<div id="fullscreen-alert-3" class="fullscreen-alert fullscreen-warning">
    <div class="alert-content">
        <div class="alert-icon">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h3 class="alert-title">注意事项</h3>
        <p class="alert-message">您即将删除重要数据，此操作不可撤销。请确认是否继续。</p>
        <div class="d-flex gap-3 justify-content-center">
            <button class="btn btn-dark" onclick="hideAlert('fullscreen-alert-3')">
                <i class="fas fa-times me-2"></i>取消
            </button>
            <button class="btn btn-danger">
                <i class="fas fa-trash me-2"></i>确认删除
            </button>
        </div>
    </div>
</div>

<!-- 4. 渐变背景提示 -->
<div id="fullscreen-alert-4" class="fullscreen-alert fullscreen-gradient">
    <div class="alert-content">
        <div class="alert-icon">
            <i class="fas fa-info-circle"></i>
        </div>
        <h3 class="alert-title">信息提示</h3>
        <p class="alert-message">您有3条未读消息和2个系统通知等待查看。</p>
        <div class="d-flex gap-3 justify-content-center">
            <button class="btn btn-light" onclick="hideAlert('fullscreen-alert-4')">
                <i class="fas fa-times me-2"></i>稍后查看
            </button>
            <button class="btn btn-outline-light">
                <i class="fas fa-bell me-2"></i>立即查看
            </button>
        </div>
    </div>
</div>

<!-- 5. 深色覆盖提示 -->
<div id="fullscreen-alert-5" class="fullscreen-alert fullscreen-overlay">
    <div class="alert-content">
        <div class="alert-icon">
            <i class="fas fa-lock"></i>
        </div>
        <h3 class="alert-title">会话超时</h3>
        <p class="alert-message">您的会话即将在1分钟后超时，请点击延长会话时间。</p>
        <div class="d-flex gap-3 justify-content-center">
            <button class="btn btn-outline-light" onclick="hideAlert('fullscreen-alert-5')">
                <i class="fas fa-sign-out-alt me-2"></i>退出登录
            </button>
            <button class="btn btn-light">
                <i class="fas fa-sync-alt me-2"></i>延长会话
            </button>
        </div>
    </div>
</div>

<!-- 6. 浅色全屏提示 -->
<div id="fullscreen-alert-6" class="fullscreen-alert fullscreen-light">
    <div class="alert-content">
        <div class="alert-icon">
            <i class="fas fa-lightbulb"></i>
        </div>
        <h3 class="alert-title">新功能提示</h3>
        <p class="alert-message">我们新增了快捷操作功能，您可以通过右键菜单快速访问常用工具。</p>
        <button class="btn btn-primary" onclick="hideAlert('fullscreen-alert-6')">
            <i class="fas fa-check me-2"></i>我知道了
        </button>
    </div>
</div>

<!-- 7. 下滑动画提示 -->
<div id="fullscreen-alert-7" class="fullscreen-alert fullscreen-primary alert-slide-down">
    <div class="alert-content">
        <div class="alert-icon">
            <i class="fas fa-download"></i>
        </div>
        <h3 class="alert-title">下载完成</h3>
        <p class="alert-message">您的文件已成功下载到本地存储，点击查看详情。</p>
        <div class="d-flex gap-3 justify-content-center">
            <button class="btn btn-outline-light" onclick="hideAlert('fullscreen-alert-7')">
                <i class="fas fa-times me-2"></i>关闭
            </button>
            <button class="btn btn-light">
                <i class="fas fa-folder-open me-2"></i>查看文件
            </button>
        </div>
    </div>
</div>

<!-- 8. 缩放动画提示 -->
<div id="fullscreen-alert-8" class="fullscreen-alert fullscreen-success alert-zoom">
    <div class="alert-content">
        <div class="alert-icon">
            <i class="fas fa-share-alt"></i>
        </div>
        <h3 class="alert-title">分享成功</h3>
        <p class="alert-message">内容已成功分享到您的社交账号，好友可以查看您的分享。</p>
        <button class="btn btn-light" onclick="hideAlert('fullscreen-alert-8')">
            <i class="fas fa-times me-2"></i>完成
        </button>
    </div>
</div>

<!-- 9. 脉冲动画提示 -->
<div id="fullscreen-alert-9" class="fullscreen-alert fullscreen-danger alert-fade-in">
    <div class="alert-content alert-pulse">
        <div class="alert-icon">
            <i class="fas fa-exclamation-circle"></i>
        </div>
        <h3 class="alert-title">紧急通知</h3>
        <p class="alert-message">检测到异常登录尝试，如非本人操作，请立即修改密码。</p>
        <div class="d-flex gap-3 justify-content-center">
            <button class="btn btn-light" onclick="hideAlert('fullscreen-alert-9')">
                <i class="fas fa-times me-2"></i>忽略
            </button>
            <button class="btn btn-warning">
                <i class="fas fa-key me-2"></i>立即修改
            </button>
        </div>
    </div>
</div>


<script>
	// 显示全屏提示框
	function showAlert(alertId) {
		// 先隐藏所有提示框
		document.querySelectorAll('.fullscreen-alert').forEach(alert => {
			alert.classList.remove('show');
		});

		// 显示指定提示框
		const alert = document.getElementById(alertId);
		if (alert) {
			// 触发重排后添加show类以启用动画
			setTimeout(() => {
				alert.classList.add('show');
			}, 10);
		}
	}

	// 隐藏全屏提示框
	function hideAlert(alertId) {
		const alert = document.getElementById(alertId);
		if (alert) {
			alert.classList.remove('show');
		}
	}

	// 点击提示框外部关闭（可选功能）
	document.querySelectorAll('.fullscreen-alert').forEach(alert => {
		alert.addEventListener('click', function (e) {
			if (e.target === this) {
				this.classList.remove('show');
			}
		});
	});
</script>

    